<html>
<head>
<title>Beer-Factory</title>
<style>
.middle {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}

.border_own {	
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	border-color: black;
	border: 2px;
	border-style: solid;
	padding: 1em;
}

.border_own2 {
	border-color: black;
	border-right: thick double #ff0000;
}
</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- JQUERY -->
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
	tinymce.init({
		selector : 'textarea'
	});
</script>
<script type="text/javascript">
	function toTop() {
		$('html, body').animate({
			scrollTop : 0
		}, 'fast');
	}
	function clear(id) {
		document.getElementById(id).style.display = "none";
	}
	function showDiv(id) {
		document.getElementById(id).style.display = "inline";
	}
	function clearAll() {
		toTop();
		clear("edit-material-form");
		clear("show-wh-table");
	}
	function showEditMaterial() {
		clearAll();
		showDiv("edit-material-form");
	}
	function showWhList() {
		clearAll();
		showDiv("show-wh-table");
	}
</script>
</script>
</head>
<body style="padding-bottom: 100px;" onload="clearAll()">
	<div class="container">
		<!-- Navbar -->
	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">LEADER</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="sales-manager.html">Sales status</a></li>
					<li><a href="leader.html">Diagrams</a></li>
					<li><a href="wh-list.html">Warehouses</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><a href="login.html">Logout</a></li>
				</ul>

			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
		<!-- Navbar -->
		<!-- --------------------------------------------------------------------------------------------- -->
		<form role="form" id="edit-material-form">
			<div class="row">
				<h1>Create Warehouse</h1>
				<div class="col-md-6">
					<div class="form-group">
						<label for="cost">Address</label> <input type="text"
							class="form-control" id="cost" />
					</div>
				</div>
			</div>
			<button type="button" class="btn btn-success btn-lg"
				onclick="clearAll()">UPDATE</button>
			<button type="button" class="btn btn-default btn-lg"
				onclick="clearAll()">BACK</button>
		</form>
		<!-- --------------------------------------------------------------------------------------------- -->
		<div class="row" id="show-wh-table">
			<h1>WH#1</h1>
			
			<table class="table table-hover">
				<thead>
					<td>#Item ID</td>
					<td>Item name</td>
					<td>Quantity</td>
				</thead>
				<tbody>
					<tr>
						<td>#1</td>
						<td>Malt</td>
						<td>100</td>
					</tr>
					<tr>
						<td>#100</td>
						<td>Water</td>
						<td>100000</td>
					</tr>
					<tr>
						<td>#9</td>
						<td>Salt</td>
						<td>1000000</td>
					</tr>
					<tr>
						<td>#7</td>
						<td>oefjadjovoado</td>
						<td>1</td>
					</tr>
				</tbody>
			</table>
			<button class="btn btn-danger" type="button" onclick="clearAll()">CLOSE</button>
			<button class="btn btn-warning" type="button" onclick="clearAll()">PRINT</button>
		</div>
		<!-- --------------------------------------------------------------------------------------------- -->
	</div>
	<div class="row panel panel-default" style="margin-top: 30px;">
		<div class="panel-heading">Warehouse List</div>
		<div class="col-md-9 border_own2">
			<table class="table table-hover panel-body">
				<thead>
					<td>#</td>
					<td>Address</td>
					
					<td>Details</td>
				</thead>
				<tbody>
					<tr style="background-color: #E6E6E6;">
						<form role="form">
							<td>-</td>
							<td>
								<div class="form-group">
									<input type="text" class="form-control" id="exampleInputEmail1"
										placeholder="Address">
								</div>
							</td>

							<td>
								<button class="btn btn-success" type="button">ADD NEW
									WAREHOUSE</button>
							</td>
						</form>
					</tr>
					<tr>
						<td>1</td>
						<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
						
						<td>
							<div class="dropdown">
								<button class="btn btn-default dropdown-toggle" type="button"
									id="dropdownMenu1" data-toggle="dropdown">
									ACTION <span class="caret"></span>
								</button>
								<ul class="dropdown-menu" role="menu"
									aria-labelledby="dropdownMenu1">
									<li role="presentation" onclick="showWhList()"><a
										role="menuitem" tabindex="-1" href="#">SHOW</a></li>
									<li role="presentation" class="divider"></li>
									<li role="presentation" onclick="showEditMaterial()"><a
										role="menuitem" tabindex="-1" href="#">EDIT</a></li>
									<li role="presentation" class="divider"></li>
									<li role="presentation"><a role="menuitem" tabindex="-1"
										href="#">REMOVE</a></li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Proin varius nisi urna, ac laoreet leo ornare ac.</td>
						
						<td>
							<div class="dropdown">
								<button class="btn btn-default dropdown-toggle" type="button"
									id="dropdownMenu1" data-toggle="dropdown">
									ACTION <span class="caret"></span>
								</button>
								<ul class="dropdown-menu" role="menu"
									aria-labelledby="dropdownMenu1">
									<li role="presentation" onclick="showWhList()"><a
										role="menuitem" tabindex="-1" href="#">SHOW</a></li>
									<li role="presentation" class="divider"></li>
									<li role="presentation" onclick="showEditMaterial()"><a
										role="menuitem" tabindex="-1" href="#">EDIT</a></li>
									<li role="presentation" class="divider"></li>
									<li role="presentation"><a role="menuitem" tabindex="-1"
										href="#">REMOVE</a></li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Vestibulum sed ornare dui,</td>
		
						<td>
							<div class="dropdown">
								<button class="btn btn-default dropdown-toggle" type="button"
									id="dropdownMenu1" data-toggle="dropdown">
									ACTION <span class="caret"></span>
								</button>
								<ul class="dropdown-menu" role="menu"
									aria-labelledby="dropdownMenu1">
									<li role="presentation" onclick="showWhList()"><a
										role="menuitem" tabindex="-1" href="#">SHOW</a></li>
									<li role="presentation" class="divider"></li>
									<li role="presentation" onclick="showEditMaterial()"><a
										role="menuitem" tabindex="-1" href="#">EDIT</a></li>
									<li role="presentation" class="divider"></li>
									<li role="presentation"><a role="menuitem" tabindex="-1"
										href="#">REMOVE</a></li>
								</ul>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-md-3">
			</br>
			<div class="dropdown">
				<button class="btn btn-default dropdown-toggle  btn-lg btn-block"
					type="button" id="dropdownMenu1" data-toggle="dropdown">
					WH table row number <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu"
					aria-labelledby="dropdownMenu1">
					<li role="presentation"><a role="menuitem" tabindex="-1"
						href="#">10</a></li>
					<li role="presentation"><a role="menuitem" tabindex="-1"
						href="#">40</a></li>
					<li role="presentation"><a role="menuitem" tabindex="-1"
						href="#">100</a></li>
					<li role="presentation" class="divider"></li>
					<li role="presentation"><a role="menuitem" tabindex="-1"
						href="#">ALL</a></li>
				</ul>
			</div>
			</br>
			<div class="input-group">
				<input type="text" class="form-control" value="Search"> <span
					class="input-group-btn">
					<button class="btn btn-default" type="button">?</button>
				</span>
			</div>
			<ul class="pagination">
				<li><a href="#">&laquo;</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">&raquo;</a></li>
			</ul>
		</div>
	</div>
</body>
</html>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>